<template>
    <div class="recommended-content">
        <div class="top-nav">
            <div
                class="nav-item"
                v-for="item in navList"
                :key="item.id"
                @click="navClick(item)"
                :class="item.id == currentNavId ? 'active' : ''"
            >
                {{ item.text }}
            </div>
        </div>

        <div class="search">
            <div class="search-input">
                <el-autocomplete 
                ref="input"
                :placeholder="placeholderText" 
                v-model="searchInput" 
                clearable
                :fetch-suggestions="querySuggest"
                @clear="clearHandler"
                @select="suggestSel"
                >
                    <el-button slot="append" class="search-btn" @click="searchHandler">搜索</el-button>

                    <template slot-scope="{ item }">
                        <div class="history-item">
                            <div class="left">
                                {{item}}
                            </div>

                            <div class="right">
                                <i 
                                    class="el-icon-close"
                                    @click.stop="removeHistoryItem(item)"
                                ></i>
                            </div>
                        </div>
                    </template>
                </el-autocomplete>
            </div>

            <!-- <el-button type="info" class="btn-sr reset" @click="resetHandler">重置</el-button> -->
            <el-button 
            v-if="~['notice', 'business'].indexOf(currentNavId)"
            type="info" 
            class="btn-sr advanced-search" 
            @click="advancedSearchHandler"
            >
                高级搜索
            </el-button>
        </div>

        <notice 
            v-if="currentNavId === 'notice'" 
            :search-str="searchInput" 
            ref="notice"
            :showASearch="advancedSearchController"
        ></notice>

        <business 
            v-if="currentNavId === 'business'" 
            :search-str="searchInput" 
            ref="business"
            :showASearch="advancedSearchController"
        ></business>

        <project-manager 
            v-if="currentNavId === 'projectManager'" 
            :search-str="searchInput" 
            ref="projectManager"
        ></project-manager>
    </div>
</template>

<script>
import {getHistory, addHistory, removeHistory, getHistoryLike,} from './js/history.js';

import GuidePopconfirm from '@/components/sys/guide-popconfirm/index.vue';
import notice from './components/notice.vue';
import business from './components/business.vue';
import projectManager from './components/project-manager.vue';

export default {
    components: { 
        GuidePopconfirm,
        notice,
        business,
        projectManager
    },
    data() {
        return {
            currentNavId: 'notice',
            searchInput: '',
            navList: [
                {
                    id: 'notice',
                    text: "查公告",
                },
                {
                    id: 'business',
                    text: "查企业",
                },
                {
                    id: 'projectManager',
                    text: "查项目经理",
                },
            ],

            advancedSearchController: false, // 高级搜索
        };
    },
    computed: {
        placeholderText:function(){
            if(this.currentNavId === 'notice'){
                return '请输入公告名称进行查询';
            }else if (this.currentNavId === 'business'){
                return '请输入企业名称进行查询';
            } else if(this.currentNavId === 'projectManager'){
                return '请输入项目经理名称进行查询';
            }
        }
    },
    methods: {
        navClick(item) {
            this.currentNavId = item.id;
        },
        //搜索
        searchHandler() {
            if (this.searchInput) {
                addHistory(this.searchInput);
            }

            if (this.currentNavId === 'notice') {
                this.$refs.notice.deSearch();
            } else if (this.currentNavId === 'business') {
                this.$refs.business.deSearch();
            } else if (this.currentNavId === 'projectManager') {
                this.$refs.projectManager.deSearch();
            }
        }, 
        clearHandler() {
            this.searchInput = '';
            
            this.searchHandler();
        },

        //重置
        resetHandler (){
            this.searchInput= '';

            if(this.currentNavId === 'notice'){
                this.$refs.notice.reset();
            }else if (this.currentNavId === 'business'){
                this.$refs.business.reset();
            }
        },

        // 高级搜索
        advancedSearchHandler() {
            this.advancedSearchController = !this.advancedSearchController;
        },

        querySuggest(text, cb) {
            if (text) {
                cb([]);

                return;
            }

            let history = getHistory();

            cb(history);
        },
        suggestSel(item) {
            this.searchInput = item;

            this.searchHandler();
        },
        removeHistoryItem(item) {
            removeHistory(item);

            this.$refs.input.getData();
        },
    },
    created () {
        var type = this.getQuery('recommend_type');

        if (type) {
            this.currentNavId = type;
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.recommended-content {
    .top-nav {
        width: 280px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .nav-item {
            cursor: pointer;

            &:hover {
                color: $primaryColor;
            }
        }
    }
    .active {
        color: $primaryColor;
    }

    .search {
        display: flex;
        justify-content: center;
        margin-top: 8px;
        margin-bottom: 14px;

        .search-input {
            width: 730px;

            ::v-deep .el-autocomplete{
                width: 100%;
            }

            ::v-deep .el-input__inner{
                border-radius: 0px;
                background-color: #eff3ff;
                border: 1px solid $primaryColor;
            }

            ::v-deep .el-input-group__append{
                border-radius: 0px;
            }

            .search-btn {
                border-radius: 0px;
                background-color: $primaryColor;
                color: white;
                border: 1px solid $primaryColor;
            }
        }

        .btn-sr{
            border-radius:0px;
            border: 1px solid $primaryColor;
            background-color: #e6edff;
            color: $primaryColor;
            margin-left: 16px;
        }
    }

    .content-nav {
        margin-top: 22px;
    }
}

.history-item{
    display: flex;
    align-items: center;
    
    .left{
        flex: 1;
    }
    
    .right{
        display: none;
    }

    &:hover{
        .right{
            display: block;
        }
    }
}
</style>